<template>
	<view class="index">
		<view class="navbar">
			<view :style="{ height: sysHeight+'px' }"></view>
			<view class="navbarH acea-row row-middle">
				<view>
					<image class="logo" :src="index_logo" mode="aspectFit"></image>
				</view>
				<view class="title">{{ welcome }}</view>
			</view>
		</view>
		
		<!-- #ifdef MP -->
		<view class="indexTip" :style="'top:' + (sysHeight + 50) + 'px'" :hidden="iShidden">
			<view class="tip acea-row row-between-wrapper">
				<view class="text">{{$t(`点击`)}}“<image src="/static/images/spot.png"></image>
					”{{$t(`添加到我的小程序， 微信首页下拉即可访问商城。`)}}</view>
				<view class="iconfont icon-guanbi" @click="closeTip"></view>
			</view>
		</view>
		<!-- #endif -->
		
		<view :style="{height:(sysHeight+50)+'px'}"></view>
		<swiper class="swiper" indicator-color="#9E9E9E" indicator-active-colo="#64361D" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item @click="openUrl(item)" v-for="(item,index) in top_banner" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
<!-- 		<view class="today-info acea-row row-middle">
			<view>
				<image class="today-icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/today-icon.png" mode="aspectFit"></image>
			</view>
			<view class="info acea-row row-column row-between-wrapper">
				<view class="color333">提醒吃药：3次</view>	
				<view class="color333">跌倒检测：2次</view>	
			</view>
		</view> -->
		
		<view class="package acea-row row-between-wrapper">
			<!-- <button open-type="contact"  class="item" style="overflow: unset;"> -->
				<view class="item" @click="urlClick(`/pages/reservation/list?cid=3`)">
					<view class="fs-40 color333">企业定制套餐</view>
					<view class="color666 mt10 fs-40">专属自己</view>
					<view class="cricle acea-row row-middle row-center">
						<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/index001.png" mode="aspectFit"></image>
					</view>
				</view>
			<!-- </button> -->

			<view class="item" @click="urlClick(`/pages/reservation/list?cid=2`)">
				<view class="fs-40 color333">个人养老套餐</view>
				<view class="color666 mt10 fs-40">点击更多</view>
				<view class="cricle acea-row row-middle row-center">
					<image class="icon" src="https://yijiaan.oss-cn-hangzhou.aliyuncs.com/pic/index002.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<swiper class="tonggao" indicator-color="#64361D" indicator-active-colo="#000000" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in bottom_banner" :key="index">
				<view class="tonggao-item">
					<image :src="item.pic" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<tabbar :path="'/pages/newIndex/index'"></tabbar>
		
		<suspension></suspension>
 
	</view>
</template>

<script>
	const app = getApp();
	import {
		SUBSCRIBE_MESSAGE,
		TIPS_KEY
	} from "@/config/cache";
	import {
		getShare,
		getVersion
	} from "@/api/public.js";
	import tabbar from '@/components/tabbar.vue';
	import suspension from '@/components/suspension.vue';
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import{
		newindex,
		getConfig
	} from '@/api/api.js'
	export default {
		components:{
			tabbar,
			suspension
		},
		data() {
			return {
				sysHeight : sysHeight,
				top_banner:[],
				bottom_banner:[],
				welcome:'',
				index_logo:'',
				iShidden: true,
				shareInfo: {},
			};
		},
		onLoad() {
			uni.hideTabBar()
			this.getdata();
			this.getConfig();
			this.setOpenShare();
		},
		methods:{
			getConfig(){
				getConfig({key:'site_phone'}).then(res=>{
					app.globalData.phone = res.data.getData;
				})
			},
			getdata(){
				newindex().then(res=>{
					this.top_banner = res.data.top_banner
					this.bottom_banner = res.data.bottom_banner
					this.welcome = res.data.welcome
					this.index_logo = res.data.index_logo
					app.globalData.logo = res.data.index_logo
				})
			},
			urlClick(url){
				uni.navigateTo({
					url: url
				})
			},
			openUrl(item){
				uni.navigateTo({
					url: item.url
				})
			},
			closeTip: function() {
				this.$Cache.set(TIPS_KEY, true);
				this.iShidden = true;
			},
			// 微信分享；
			setOpenShare: function() {
				let that = this;
				getShare().then((res) => {
					let data = res.data;
					this.shareInfo = data;
				});
			},
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let that = this;
			return {
				title: this.shareInfo.title,
				path: "/pages/newIndex/index?spid=" + this.$store.state.app.uid || 0,
				imageUrl: this.shareInfo.img,
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: this.shareInfo.title,
				query: {
					spid: this.$store.state.app.uid || 0
				},
				imageUrl: this.shareInfo.img,
			};
		},
		// #endif
	}
</script>

<style lang="scss">
	page{ 
		background-color: #ffffff !important;
	}
	.index{
		
		.indexTip {
			position: fixed;
			right: 42rpx;
			z-index: 10000;
		
			.tip {
				width: 400rpx;
				border-radius: 6rpx;
				background-color: #fff;
				padding: 15rpx 22rpx;
				position: relative;
		
				&::before {
					content: "";
					width: 0;
					height: 0;
					border-left: 15rpx solid transparent;
					border-right: 15rpx solid transparent;
					border-bottom: 17rpx solid #fff;
					position: absolute;
					top: -14rpx;
					right: 95rpx;
				}
			}
		
			.text {
				font-size: 22rpx;
				color: #333;
				width: 320rpx;
		
				image {
					width: 30rpx;
					height: 16rpx;
					display: inline-block;
				}
			}
		
			.iconfont {
				color: #cdcdcd;
				font-size: 32rpx;
			}
		}
		
		.navbar{
			width: 100%;
			background-color: #ffffff;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 999;
			
			.navbarH{
				width: 100%;
				height: 100rpx;
				
				.logo{
					width: 100rpx;
					height: 100rpx;
					margin-left: 30rpx;
					margin-right: 10rpx;
				}
				.title{
					width: 170rpx;
					color: #FD7D36;
					font-size: 36rx;
					font-weight: bold;
				}
			}
		}
		
		.swiper{
			width: 690rpx;
			height: 690rpx;
			border-radius: 80rpx;
			overflow: hidden;
			margin: 30rpx auto;
			
			.swiper-item{
				width: 690rpx;
				height: 690rpx;
				// background-color: #FD7D36;
				
				image{
					height: 100%;
					width: 100%;
				}
			}
		}
		
		.today-info{
			width: 690rpx;
			height: 184rpx;
			margin: 0 auto;
			background: #FCF2E7;
			border-radius: 64rpx;
			padding: 0 50rpx;
			
			.today-icon{
				width: 84rpx;
				height: 92rpx;
			}
			.info{
				height: 92rpx;
				border-left: 1rpx solid #B6B6B6;
				margin-left: 30rpx;
				padding: 0 30rpx;
				font-size: 30rpx;
			}
		}
		
		.package{
			padding: 30rpx;
			
			.item{
				width: 320rpx;
				height: 320rpx;
				box-shadow: 0px 2rpx 10rpx 0rpx rgba(236, 123, 0, 0.15);
				border-radius: 56rpx;
				padding: 30rpx;
				position: relative;
				
				.cricle{
					width: 192rpx;
					height: 192rpx;
					border-radius: 50%;
					position: absolute;
					bottom: -66rpx;
					left: 64rpx;
					box-shadow: 0px 2px 10px 0px rgba(236, 123, 0, 0.2);
					background-color: #ffffff;
					
					.icon{
						width: 96rpx;
						height: 96rpx;
					}
				}
			}
		}
		
		.tonggao{
			width: 690rpx;
			height: 208rpx;
			border-radius: 100rpx;
			margin: 100rpx auto;
			overflow: hidden;
			
			.tonggao-item{
				width: 100%;
				height: 100%;
				// background-color: #FD7D36;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		
	}
</style>
